<template>
  <li>
    <template v-if="isEditing">
        <input v-model="newText" @keyup.enter="confirmNewText"/>
    </template>
    <template v-else>
      <input type="checkbox" v-model="todo.completed" />
      <span @dblclick="editTodo2" :class="{ completed: todo.completed }">{{
        todo.text
      }}</span>
      <button @click="removeTodo">删除</button>
    </template>
  </li>
</template>
<script setup>
import { defineProps, defineEmits, ref } from "vue";
const props = defineProps(["todo"]);
const emit = defineEmits(["remove"]);
//当前是否正在编辑当中
const isEditing = ref(false);
const newText = ref(props.todo.text);
const removeTodo = () => {
  emit("remove", props.todo);
};
//=========第二种方案===========
const editTodo2 = ()=>{
    isEditing.value = true;
}
const confirmNewText = ()=>{
    props.todo.text = newText.value;
    isEditing.value = false;
}
//=========第一种方案===========
const editTodo = () => {
  const currentText = props.todo.text;
  const newText = prompt("编辑Todo", currentText);
  props.todo.text = newText;
};

</script>
<style>
.completed {
  color: gray;
  text-decoration: line-through;
}
</style>
